<template>
    <div class="categoryTemplate bg-white bj">
        <el-scrollbar style="height: 100%;">
            <div class="tit">借款单</div>
            <div class="formTable relative">
                <div class="formTableHeader absolute">
                    <div class="left">
                        <span>单据编号：{{formData.receiptNumber}}</span>
                    </div>
                    <div class="right">
                        <span>制单日期： {{formData.prepareTime}}</span>
                    </div>
                </div>
                <el-row>
                    <el-col :span="3">
                        <div class="common">事业部</div>               
                    </el-col>
                    <el-col :span="4">
                        <div class="common grayBackground">{{formData.businessUnitName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">中心</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common grayBackground">{{formData.centreName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">部门</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common grayBackground">{{formData.deptName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">姓名</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common grayBackground">{{formData.empName}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common required"><span>借款类别</span></div>               
                    </el-col>
                    <el-col :span="4">
                        <div class="common">
                            <el-input v-model="loanCategoryName[0]" placeholder="借款类别" readonly @click.native="openBorrowCategory"></el-input>
                            <el-input v-model="formData.loanCategory"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common required"><span>币别</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common">
                            <el-select v-model="formData.currency" placeholder="选择币别">
                                <el-option v-for="(items, index) in currencyList"  :label="items.name" :value="items.id" :key="index"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common required"><span>付款科目</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common">
                            <el-select v-model="formData.paymentSubjects">
                                <el-option label="库存现金" value="库存现金"></el-option>
                                <el-option label="银行存款" value="银行存款"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">借款余额</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">{{formData.loanBalance}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common required"><span>预计还款时间</span></div>               
                    </el-col>
                    <el-col :span="4">
                        <div class="common">
                            <el-date-picker
                            v-model="formData.expectedRepaymentDate"
                            type="date" 
                            format="yyyy 年 MM 月 dd 日" placeholder="选择时间" :picker-options="datePicker" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common borderNone">收款</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行户主</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="common">
                            <el-input v-model="formData.householderIncome" :disabled="!isEditBankInfo"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">付款</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行户主</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="common">
                            <el-input v-model="formData.householderPay" placeholder="银行户主" @click.native="showBankInfo" readonly :disabled="!isEditBankInfo"></el-input>
                            <!-- 付款银行信息id -->
                            <input type="hidden" v-model="formData['bank']">
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">借款人员</div>               
                    </el-col>
                    <el-col :span="1">
                        <div class="common required"><span>手机</span></div>               
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <el-input v-model="formData.phone"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">银行</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">开户银行</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="common">
                            <el-input v-model="formData.bankIncome" :disabled="!isEditBankInfo"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">银行</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">开户银行</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="common">
                            <el-input v-model="formData. bankPay" placeholder="开户银行" @click.native="showBankInfo" readonly :disabled="!isEditBankInfo"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">联系方式</div>               
                    </el-col>
                    <el-col :span="1">
                        <div class="common">内线</div>               
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <el-input v-model="formData.interiorWiring"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">信息</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行账号</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="common">
                            <el-input v-model="formData.bankAccountIncome" :disabled="!isEditBankInfo"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">信息</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行账号</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="common">
                            <el-input v-model="formData.bankAccountPay" placeholder="银行账号" @click.native="showBankInfo" readonly :disabled="!isEditBankInfo"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common minHeight required"><span>借款事由</span></div>
                    </el-col>
                    <el-col :span="14">
                        <div class="common minHeight">
                            <el-input
                            type="textarea"
                            placeholder="输入借款事由"
                            v-model="formData.borrowingReason" style="height: 100% !important">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="common minHeight">
                            <el-row style="width:100%">
                                <el-col :span="24">
                                    <div class="common" style="border-right: none;">声明</div>
                                </el-col>                            
                            </el-row>
                            <el-row style="width:100%">
                                <el-col :span="24">
                                    <div class="common borderNone" style="line-height: 22px;padding: 3px;border-right: none;">本借款超过预计还款日期,或报销冲借款后有借款余额，同意从本人工资中扣除。</div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">借款大写金额</div>               
                    </el-col>
                    <el-col :span="9">
                        <div class="common grayBackground">{{formData.amountBig}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">制单金额</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <el-input v-model="formData.voucherAmount" @blur="blurMoney" @focus="focusMoney" class="center"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">审批金额</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common">{{formData.approvalAmount}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common grayBackground">直接主管</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">张三</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">间接主管</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">李四</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">财务主管</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">王五</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">财务经理</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">赵六</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">财务总监</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">小明</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-blue"></div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-blue"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-blue"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-red"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common displayFlex">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common grayBackground">副总经理</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">张总</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">总经理</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">李总</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">董事长</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">王总</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">出纳</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">小红</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common"></div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common"></div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common"></div>
                    </el-col>
                </el-row>
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formData: {},
            currencyList: [],           //币别
            datePicker: this.validateDatePicker(),          //校验还款时间
            menuStatus: this.$store.state.borrowOrderStore.menuStatus,          //按钮状态
            isEditBankInfo: true,           //是否可以编辑首付款银行信息
            loanCategoryName: this.$store.state.borrowOrderStore.loanCategoryName,           //借款类别名称
            loanCategoryId: this.$store.state.borrowOrderStore.loanCategoryId,
            rowId: this.$store.state.borrowOrderStore.rowId,
            bankInfo: {},
            bank: this.$store.state.borrowOrderStore.bankInfo
        }
    },
    watch: {
        menuStatus(newVal) {
            if(newVal.length > 0 && newVal[0] == 3) {       //监听是否点击了保存
                this.save();
            }
        },
        'formData.paymentSubjects'(newVal) {            //付款方式是否为库存现金
            newVal == '库存现金' ? this.isEditBankInfo = false : this.isEditBankInfo = true;
        },
        'formData.voucherAmount'(newVal) {            //制单金额
            if(!newVal){
                this.formData.amountBig = "";
                this.formData.approvalAmount = "";
            }
        },
        'formData.voucherAmount'(newVal) {                //将制单金额转为大写
            if(newVal) {
                if(this.$util.tfMoneyToUpperCase(newVal)) {
                    this.formData['amountBig'] = this.$util.tfMoneyToUpperCase(newVal);
                    this.formData['approvalAmount'] = newVal;
                }
            } else {
                this.formData['amountBig'] = '';
                this.formData['approvalAmount'] = '';
            }
        },
        loanCategoryId(newVal, oldVal) {
            this.formData['loanCategory'] = newVal[0];
        },
        bank(newVal) {          //监听银行信息的变化，更新付款银行信息
            if(newVal.length > 0) {
                this.formData['householderPay'] = newVal[0]['name'];
                this.formData['bankPay'] = newVal[0]['bankName'];
                this.formData['bankAccountPay'] = newVal[0]['accountNumber'];
                this.formData['bank'] = newVal[0]['id'];
            }
        }
    },
    methods: {
        getUpdateData() {       //获取要修改的数据
            this.$http.get('borrowingForm/selectBorrowingFormById?id=' + this.rowId).then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data) {
                        this.$store.commit('borrowOrderStore/updateLoanCategoryName', res.data.data['loanCategoryName']);
                        this.formData = res.data.data;
                        this.formData['voucherAmount'] = '￥' + this.$util.formatNumberRgx(this.formData['voucherAmount'].toFixed(2));
                        this.formData['approvalAmount'] = '￥' + this.$util.formatNumberRgx(this.formData['approvalAmount'].toFixed(2));
                    }
                }
            });
        },
        getBankInfo() {
            this.$http.get('borrowingForm/findAuxiliaryInfoBank').then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data) {
                        let data = res.data.data[0];
                        this.formData['householderPay'] = data['name'];
                        this.formData['bankPay'] = data['bankName'];
                        this.formData['bankAccountPay'] = data['accountNumber'];
                        this.formData['bank'] = data['id'];
                    }
                }
            });
        },
        getData() {         //获取基本信息
            this.$http.get('borrowingForm/loadBorrowingFormVO').then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data) {
                        this.formData = res.data.data;
                    }
                }
            });
        },
        getCurrentList() {          //获取币别单位
            this.$http.get('currency/findAllByState').then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data) {
                        this.currencyList = res.data.data;
                    }
                }
            });
        },
        openBorrowCategory() {              //打开借款类别窗口
            this.$util.openLayerIframe({title: '借款单-借款类别', zIndex: 13, width: '80%', height: '80%', url: this.$domain + '/#/financial/borrowOrder/selectBorrowCategory'});
        },
        validateDatePicker() {          //校验还款时间
            let that = this;
            return {
                disabledDate(time){
                    return time.getTime() < Date.now()
                }
            }
        },
        save() {        //保存
            if(!this.formData['loanCategory'] || !this.formData['currency'] || !this.formData['paymentSubjects'] || !this.formData['expectedRepaymentDate'] || !this.formData['phone'] || !this.formData['borrowingReason']) {
                this.$message({message: '必填项不能为空', duration: 1500, type: 'warning'});
                return false;
            }
            let data = {
                receiptNumber: this.formData['receiptNumber'],                  //单据编号
                prepareTime: this.$util.currentDate(),                          //制单日期
                businessUnit: this.formData['businessUnit'],                    //事业部
                centre: this.formData['centre'],                                //中心
                dept: this.formData['dept'],                                    //部门
                emp: this.formData['emp'],                                      //姓名
                loanCategory: this.formData['loanCategory'],                    //借款类别
                currency: this.formData['currency'],                            //币别
                paymentSubjects: this.formData['paymentSubjects'],              //付款科目
                loanBalance: this.formData['loanBalance'],                      //借款余额
                expectedRepaymentDate: this.formData['expectedRepaymentDate'],  //预计还款时间
                householderIncome: this.formData['householderIncome'],          //收款-银行户主
                bankIncome: this.formData['bankIncome'],                        //收款-开户银行
                bankAccountIncome: this.formData['bankAccountIncome'],          //收款-银行账号
                phone: this.formData['phone'],                                  //手机
                interiorWiring: this.formData['interiorWiring'],                //内线
                borrowingReason: this.formData['borrowingReason'],              //借款事由
                amountBig: this.formData['amountBig'],                          //借款大写金额
                voucherAmount: (this.formData['voucherAmount'].substr(1)).replace(/\,/ig,''),        //制单金额
                approvalAmount: this.formData['approvalAmount'].substr(1).replace(/\,/ig,''),      //审批金额
                bank: this.formData['bank'],          //付款银行数据id
            };
            if(this.formData['id']) {
                //修改
                data['id'] = this.formData['id'];
                this.$http({
                    method: "post",
                    url: "borrowingForm/updateBorrowingForm",
                    params: data
                }).then(res => {                 
                    if(res.data.code == 20001) {
                        this.$message({message: '修改成功', type: 'success', duration: 1500});
                        setTimeout(() => {
                            this.$store.dispatch('borrowOrderStore/getOrderTableDataByBtnStutas');
                            this.close();
                        }, 1000);
                    }
                });
            } else {
                //新增
                this.$http({
                    method: "post",
                    url: "borrowingForm/insertBorrowingForm",
                    params: data
                }).then(res => {         
                    if(res.data.code == 20001) {
                        //新增单据成功后，需要开启审批流程
                        console.log(res);
                        // let obj = {
                        //     bill: 0,
                        //     billDateId: 
                        // }
                        // this.startApprove(data['loanCategory'], data['approvalAmount']);
                    } else {
                        this.$message({message: '单据新增失败', type: 'error', duration: 1500});
                    }
                });
            }
        },
        startApprove(loanCategoryId, money) {            //开启审批流程 参数：类别id
            this.$http.post('activiti/approveStart?categoryId=' + loanCategoryId, JSON.stringify({strMoney: money}), {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }).then(res => {
                if(res.data.code == 20001) {
                    this.$message({message: '单据新增成功', type: 'success', duration: 1500});
                    setTimeout(() => {
                        this.$store.commit('borrowOrderStore/updateLoanCategoryName');      //清空类别名称
                        this.$store.dispatch('borrowOrderStore/getOrderTableDataByBtnStutas');        //刷新表格数据
                        this.close();
                    }, 1000);
                } else {
                    this.$message({message: res.data.msg || '审批流程开启失败', type: 'error', duration: 1500});
                }
            });
        },
        showBankInfo() {            //打开银行信息窗口
            this.$util.openLayerIframe({title: '借款单-付款银行', zIndex: 13, width: '600px', height: '400px', url: this.$domain + '/#/financial/borrowOrder/bank'});
        },
        blurMoney() {           //制单金额失去焦点
            if(this.formData['voucherAmount']) {
                this.formData['voucherAmount'] = '￥' + this.$util.formatNumberRgx(Number(this.formData['voucherAmount']).toFixed(2));
                this.formData['approvalAmount'] = '￥' + this.$util.formatNumberRgx(Number(this.formData['approvalAmount']).toFixed(2));
            }
        },
        focusMoney() {          //制单金额获得焦点，清空金额
            if(this.formData['voucherAmount']) this.formData['voucherAmount'] = '';
            if(this.formData['approvalAmount']) this.formData['approvalAmount'] = '';
            if(this.formData['amountBig']) this.formData['amountBig'] = '';
        },
        close() {           //关闭新增弹窗
            let index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
            parent.layer.close(index);
        }
    },
    created() {
        if(this.rowId) {
            //修改
            this.getUpdateData();
        } else {
            //新增
            this.getData();
        }
        this.getBankInfo();
        this.getCurrentList();
    }
}
</script>
<style scoped>
    .categoryTemplate {margin-top: 10px;height: calc(100% - 64px);}
    .categoryTemplate .tit {padding: 20px 0;}
    .minHeight {height: 90px !important;line-height: 90px !important;}
    .circle {display: inline-block;border: 1px solid #000;border-radius: 50%;width: 16px;height: 16px;vertical-align: middle;background-color: #fff;}
    .circle.bg-blue {border-color: #409EFF;background-color: #409EFF;}
    .circle.bg-red {border-color: #f78989;background-color: #f78989;}
</style>